<template>
    <view class="">
        <view class="fselect" @click.stop="show=true">
            <view class="">{{name}}</view>
            <image class="icon" src="./static/icon.png" mode=""></image>
        </view>
        <view class="BG" v-if="show" @click.stop="show=false"></view>
        <view v-if="show" class="item" @click.stop="show=false">
            <view class="item-name" v-for="(item,index) in List" @click="pushemit(item)">{{item.name}}</view>
           
        </view>
    </view>
</template>

<script>
    export default {
        name: "Fselect",
        props:{
            List:{
                type:Array,
                default:()=>{
                    return []
                },
            },
            name:{
                type:String,
                default:"",
            }
        },
        data() {
            return {
                show: false,
            };
        },
       
        methods:{
            pushemit(item){
                this.name = item.name
                this.$emit("Label",item)
            }
        }
    }
</script>

<style scoped>
    .BG {
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .fselect {
        width: 188rpx;
        height: 60rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6rpx;
        margin-right: 10rpx;
        position: relative;
    }

    .icon {
        width: 24rpx;
        height: 14rpx;
        margin: 0 10rpx;
    }

    .item {
        width: 188rpx;
        padding: 6rpx;
        background-color: #FFFFFF;
        margin-top: 10rpx;
        border-radius: 8rpx;
        z-index: 9999;
        position: relative;
    }

    .item-name {
        text-align: center;
        z-index: 1000;
    }
</style>